﻿@page "/"
@using TodoApp.Contracts;
@using TodoApp.Web.ApiCallers;
<MContainer Style="max-width: 500px">

    <MTextField @bind-Value="_newTodo"
                Label="What are you working on?"
                Solo
                OnKeyDown="OnEnterKeyDown">
        <AppendContent>
            <FadeTransition>
                <MIcon If="@(!string.IsNullOrEmpty(_newTodo))"
                       OnClick="()=>Create()">
                    add_circle
                </MIcon>
            </FadeTransition>
        </AppendContent>
    </MTextField>

    <h2 class="text-h4 success--text pl-4">
        Tasks: 
        <FadeTransition LeaveAbsolute>
            <KeyTransitionElement Tag="span" Value="@($"task-{_tasks.Count}")">
                @_tasks.Count
            </KeyTransitionElement>
        </FadeTransition>
    </h2>

    <MDivider></MDivider>

    <MRow Class="my-1" Align=AlignTypes.Center>

        <strong class="mx-4 info--text text--darken-2">
            Remaining: @RemainingTasks
        </strong>
        <MDivider Vertical></MDivider>
        <strong class="mx-4 success--text text--darken-2">
            Completed: @CompletedTasks
        </strong>
        <MSpacer></MSpacer>
        <MProgressCircular Value=Progress Class="mr-2"></MProgressCircular>
    </MRow>

    <MDivider Class="mb-4"></MDivider>

    @if (_tasks.Count > 0)
    {
        <MCard>
            <SlideYTransition>
                @for (var i = 0; i < _tasks.Count; i++)
                {
                    var task = _tasks[i];
                    if (i != 0)
                    {
                        <MDivider></MDivider>
                    }
                    <MListItem>
                        @if (editorTodoId == task.Id)
                        {
                            <MTextField Color="purple darken-2" @bind-Value="_updateTodo"></MTextField>
                        }
                        else
                        {
                            <MListItemAction>
                                <MCheckbox TValue="bool" Value="@task.Done"
                               ValueChanged="@(v => Done(task.Id,v))"
                               Color="@(task.Done ? "grey" : "primary")">
                                    <LabelContent>
                                        <div class="@(task.Done ? "grey--text" : "primary--text") ml-4">
                                            @task.Title
                                        </div>
                                    </LabelContent>
                                </MCheckbox>
                            </MListItemAction>
                        }

                        <MSpacer></MSpacer>
                        <MButton Icon Show="@(task.Done==false&&editorTodoId!=task.Id)" OnClick="()=>{editorTodoId=task.Id;_updateTodo=task.Title;}">
                            <MIcon>mdi-pencil</MIcon>
                        </MButton>

                        <MButton Outlined Small Show="@(editorTodoId==task.Id)" OnClick="()=>Update(task)" Color="success" Class="mr-2">
                            ok
                        </MButton>
                        <MButton Outlined Small Show="@(editorTodoId==task.Id)" OnClick="()=>editorTodoId=null">
                            canel
                        </MButton>

                        <MButton Icon Show="@(editorTodoId!=task.Id)" OnClick="()=>Delete(task.Id)" Color="error">
                            <MIcon>mdi-delete</MIcon>
                        </MButton>
                        <ScrollXTransition>
                            <MIcon If="@task.Done" Color="success">
                                mdi-check
                            </MIcon>
                        </ScrollXTransition>
                    </MListItem>
                }
            </SlideYTransition>
        </MCard>
    }

</MContainer>

@code {

    [Inject]
    public TodoCaller TodoCaller { get; set; }

    string _newTodo = "";
    string _updateTodo = "";

    private List<TodoGetListDto> _tasks = new();

    int CompletedTasks => _tasks.Count(t => t.Done);

    float Progress => _tasks.Count <= 0 ? 0 : (CompletedTasks * 100f) / _tasks.Count;

    int RemainingTasks => _tasks.Count - CompletedTasks;

    Guid? editorTodoId;

    async Task OnEnterKeyDown(KeyboardEventArgs eventArgs)
    {
        if (eventArgs.Key == "Enter")
        {
            await Create();
        }
    }
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        await LoadListDataAsync();
    }

    private async Task LoadListDataAsync()
    {
        var result = await TodoCaller.GetListAsync();
        _tasks = result;
    }

    async Task Create()
    {
        await TodoCaller.CreateAsync(new TodoCreateUpdateDto { Title = _newTodo });

        await LoadListDataAsync();
        _newTodo = "";
    }

    async Task Done(Guid id, bool done)
    {
        await TodoCaller.DoneAsync(id, done);
        await LoadListDataAsync();
    }

    async Task Update(TodoGetListDto task)
    {
        await TodoCaller.UpdateAsync(task.Id, new TodoCreateUpdateDto { Title = _updateTodo });
        await LoadListDataAsync();
        editorTodoId = null;
    }

    async Task Delete(Guid id)
    {
        await TodoCaller.DeleteAsync(id);
        await LoadListDataAsync();
        editorTodoId = null;
    }
}
